define([
  'underscore',
  './BaseView'
], function(_, BaseView) {

  /*
   * Title text with link
   */
  return BaseView.extend({

    type: 'TitleView',
    events:{"click":"clickHandle"},
    _getStyleFromOptions:function(options,innerSpan){
      var styleArr={};
      if (this.options.marginTop||this.options.marginRight||this.options.marginLeft||this.options.marginBottom) {
        styleArr["marginTop"] = this.options.marginTop+"px";
        styleArr["marginRight"] = this.options.marginRight+"px";
        styleArr["marginLeft"] = this.options.marginLeft+"px";
        styleArr["marginBottom"] = this.options.marginBottom+"px";
      }
      if (this.options.color) {
        styleArr["color"] = this.options.color;
      }
      if (this.options.size) {
        styleArr["fontSize"] = this.options.size;
      }
      if(this.options.padding){
        styleArr["padding"] = this.options.padding;
      }
      if (this.options.lineNum &&this.options.lineNum != "") {
        if (this.options.lineNum == 0) return;
        innerSpan.addClass('line-set');
        styleArr["-webkit-line-clamp"] = this.options.lineNum + "";
      }
      if (this.options.lineHeight) {
        styleArr["line-height"] = this.options.lineHeight + "em";
      }
      if (this.options.bold) {
        styleArr["font-weight"] = "bold";
      }
      if (this.options.italic) {
        styleArr["font-style"] = "italic";
      }
      if (this.options.underline) {
        styleArr["text-decoration"] = "underline";
      }
      if (this.options.align) {
        styleArr["text-align"] = this.options.align + "";
      }
      return styleArr;
    },
    clickHandle:function(e){
      this.triggerEvent('click');
    },
    render: function() {
      this.$el.empty();
      // link node
      var innerSpan = $('<div>'+(this.options.title || '')+"</div>");
      innerSpan.css(this._getStyleFromOptions(this.options,innerSpan));
      if(this.options.titlestyle == "style2")
      {
        var style = ('<div class = "title-shape"></div>')
        innerSpan.prepend(style);
      }
      if(this.options.titlestyle == "style3")
      {
        var style = ('<div class = "title-circular"></div>')
        innerSpan.prepend(style);
      }
      if(this.options.titlestyle == "style4")
      {
        var style = ('<div class = "title-hollow"></div>')
        innerSpan.prepend(style);
      }
      if(this.options.ellipsis)
      {
        innerSpan.removeClass("line-set-selected").addClass("line-set");
      }
      else{
        innerSpan.removeClass("line-set").addClass("line-set-selected");
      }
      this.$el.append(innerSpan);
      this.$el.css({'width':'100%'});
      this.$el.removeClass("TitleView");
      this.options.style="";
      return this;
    }

  });
});
